<template>
	<view>
		<uv-popup ref="refPopup" mode="bottom" @change="change" round="8" :closeable="true">
			<view class="speech-main">
				<view class="top-title">
					语音输入
				</view>
				<view class="content">
					<uv-textarea v-model="currentText" count maxlength="200" placeholder="语音文字输入..." ></uv-textarea>
				</view>
				<view class="bottom">
					<view class="text-btn clear" @click="clear">清空</view>
					<view class="button-view">
						<view :class="{scale:isRecord}" @touchstart="streamRecord" @touchend='endStreamRecord' class="button"></view>
						<view class="text">按住说话</view>
					</view>
					<view class="text-btn confirm" @click="confirm">确认</view>		
				</view>
				
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	// import { ref } from 'vue'
	// const refPopup = ref('')
	// function open(){
	// 	refPopup.value.open('bottom');
	// }
	//
	//
	// const isRecord=ref(false)
	//
	// const emit = defineEmits(['getSpeeckInfo'])
	//
	// var plugin = requirePlugin("WechatSI")
	// let manager = plugin.getRecordRecognitionManager()
	// const currentText = ref('')
	// const buttonInfo = ref('')
	// function streamRecord(){
	// 	buttonInfo.value = '正在识别中...'
	// 	isRecord.value = true
	// 	 manager.start({
	// 		lang: 'zh_CN',
	// 	})
	// }
	// function endStreamRecord(){
	// 	manager.stop()
	// 	isRecord.value = false
	// 	buttonInfo.value = '长按语音识别'
	// }
	// function initRecord(){
	// 	manager.onRecognize = (res) => {
	// 		console.log('新内容',res)
	// 		let text = res.result
	// 		//识别的内容
	// 		currentText.value = text
	// 	}
	// 	manager.onStop = (res) => {
	// 		let text = res.result
	// 		if (text == '') {
	// 			uni.showToast({
	// 				title: '没有识别到声音内容',
	// 				duration: 2000,
	// 				icon:'error'
	// 			})
	// 			return
	// 		}
	// 		//识别的内容
	// 		currentText.value = text
	// 	}
	// }
	// initRecord()
	//
	// function clear(){
	// 	currentText.value = ''
	// }
	//
	// function confirm(){
	// 	refPopup.value.close();
	// 	emit('getSpeeckInfo',currentText.value)
	// }
	//
	// defineExpose({
	// 	open
	// })
</script>

<style scoped lang="scss">
	.speech-main{
		.top-title{
			border-bottom: 1px solid #E7E7E7;
			height: 112rpx;
			line-height: 112rpx;
			text-align: center;
			font-size: 32rpx;
		}
		.content{
			padding: 20rpx;
			color: #767676;
		}
		.bottom{
			height: 150rpx;
			display: flex;
			padding: 0 30rpx;
			justify-content: space-between;
			text-align: center;
			margin-bottom: 40rpx;
			.text-btn{
				flex: 1;
				text-align: center;
				line-height: 146rpx;
				font-size: 36rpx;
				&.clear{
					color: #606266;
				}
				&.confirm{
					color: #3375F6;
				}
			}
			.button-view{
				width: 350rpx;
				font-size: 36rpx;
				color: #606266;
				.button{
					margin: 0 auto;
					width: 146rpx;
					height: 146rpx;
					background: url('@/static/image/dailycheck/speeck.png') no-repeat;
					background-size: 100% 100%;
					transition:all .3s  linear;
					cursor: pointer;
				}
				.text{
					padding-top: 20rpx;
				}
			}
			
			.scale{
				cursor: pointer;
				transform: scale(1.3);
			}
			
		}
	}
</style>
